import Base from "../base.js";
import usersApi from "../../api/users.js"
export default class extends Base {
    data = {
        rows: [],
        curPage: 1,//当前页
        eachPage: 3,//每页显示条数
        total: 0,//总条数
        maxPage: 0,//总页数
    }
    render() {
        this.$el.html(
            `
                <table id="demo" lay-filter="test"></table>
                <div id="test1"></div>
            `
        )
        layui.use('table', () => {
            this.table = layui.table;

            //第一个实例
            this.table.render({
                elem: '#demo'
                , cols: [[ //表头
                    , { field: 'userName', title: '用户名称', }
                ]]
            });

        });

        layui.use('laypage', () => {
            this.laypage = layui.laypage;
        });
    }
    async getList() {
        const { curPage, eachPage } = this.data
        this.data = await usersApi.getList({ curPage, eachPage });
        console.log(this.data.rows);
        this.rerender();
    }

    mounted() {
        this.getList()
    }

    rerender() {
        console.log(this.data);
        this.table.reload('demo', {
            data: this.data.rows,
            curr: this.data.eachPage
        });

        //执行一个laypage实例
        this.laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , limit: this.data.eachPage
            , layout: ["count", "prev", "page", "next", "limit"]
            , count: this.data.total //数据总数，从服务端得到
            , limits: [5, 10, 15]
            , curr: this.data.curPage
            , jump: async (obj, first) => {
                //obj包含了当前分页的所有参数，比如：

                //首次不执行
                if (!first) {
                    //do something
                    // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    // console.log(obj.limit); //得到每页显示的条数

                    this.data.curPage = obj.curr
                    this.data.eachPage = obj.limit
                    const { curPage, eachPage } = this.data
                    this.data = await usersApi.getList({ curPage, eachPage });

                    this.table.reload('demo', {
                        data: this.data.rows,
                        limit: this.data.eachPage
                    });
                }
            }
        });

    }
}